<template>
  <div style="padding: 0 350px;">
    <div style="margin: 30px 0;padding:30px;background-color: #FFFFFF;min-height: 500px;border:1px solid white;border-radius: 20px">
      <div v-for="item in pastOrder" >
        <div style="display: flex;margin-bottom: 20px;padding: 20px">
          <img :src="'http://localhost:8080/api/file/' + item.hanfu_image" width="120px" height="120px">
          <div style="margin-left: 50px">
            <h3>{{ item.hanfu_name }}</h3>
            <div style="display: flex">
              <div style="color:gray;">金额：</div>
              <div style="color: red">￥{{ item.order_price }}</div>
            </div>
            <div style="display: flex">
              <div style="color:gray;">尺码：</div>
              {{ item.order_size }}
            </div>
            <div style="display: flex">
              <div style="color:gray;">数量：</div>
              {{ item.order_sum }}
            </div>
            <div style="display: flex">
              <div style="color:gray;">收货地址：</div>
              {{ item.order_address }}
            </div>
          </div>
        </div>
        <el-divider v-if="item != pastOrder[pastOrder.length - 1]">
          <el-icon><star-filled /></el-icon>
        </el-divider>
      </div>
    </div>
  </div>
</template>

<script setup>
import {userApi} from "../../api/app";
import {onMounted, ref} from "vue";

const pastOrder = ref();

onMounted(() => {
  const customerId = JSON.parse(localStorage.getItem('user')).customerId;
  userApi.getOrders({
    customerId: customerId
  }).then(response => {
    pastOrder.value = response;
    console.log(pastOrder.value);
  })
})
</script>

<style scoped>

</style>